import React from 'react';
import './everyDayBudget.less';
import { Breadcrumb, Icon, Button, Table, Modal, Input, Select, Pagination, message ,Row,Col,DatePicker,Form,Checkbox,AutoComplete,InputNumber,Upload } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';
import noRepeat from '../commonFunction/noRepeat';
import getFormatDate from '../commonFunction/getFormatData';
import moment from 'moment';
const config = new Config();
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
const userInfo = JSON.parse(sessionStorage.getItem('UserInfo')); //用户信息
const root = userInfo.root;

class EverydayBudget1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,//我的申请模态框
            dateStr:['',''],//默认今天的日期字符串
            date:[undefined,undefined],//默认今天的日期
            dateStr1:['',''],//默认今天的日期字符串
            date1:['',''],//默认今天的日期
            channelList: [],//申请列表
            channelcount: 0,//申请列表条数
            pageindex:1,//当前页码
            wordCount1:0,//申请事宜字数
            selectedRows:[],//打印选中的列表
            selectionList:[[],[],[],[]],//筛选列表
            matchProducts:[],//产品自动完成列表
            matchProducts1:[],//平台自动完成列表
            selectValue:'',//产品自动完成列表选中的值
            selectValue1:'',//平台自动完成列表选中的值
            authTreeOfOne:{},//小工具权限
            record:{},//
            channelList2:[{}],
            userList:{},//用户列表
            allSpentMoney:0,//预计消费
            allInputLines:0,//预计进线
        }
    }
    componentWillMount(){
        console.log(userInfo.auth);
        if(userInfo.auth){
            if(userInfo.auth['橘色小工具']){
                this.setState({
                    authTreeOfOne:userInfo.auth['橘色小工具']
                },()=>{
                    console.log(this.state.authTreeOfOne['/payrequest/save']);
                })
            }
        }
        // this.getUserList();
    }
    componentDidMount() {
        //筛选列表
        let selectionList=[[],[],[],[]];
        const {authTreeOfOne}=this.state;
        let url=`${config.juseLittleTool}/budget/findsource`;
        if(authTreeOfOne['/budget/findonesource']){
            url=`${config.juseLittleTool}/budget/findonesource`
        }
        if(root||(authTreeOfOne['/budget/findsource'])){
            url=`${config.juseLittleTool}/budget/findsource`
        }
        $.ajax({
            url: url,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            //data:{user:sessionStorage.getItem('token'),},
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    const List = data.data;
                    if (List.length > 0) {
                        List.forEach((ele, i) => {
                            selectionList[0].push(ele.product);  //产品
                            selectionList[1].push(ele.umbrellaname);//平台
                            selectionList[2].push(ele.channelname);//账户名
                            selectionList[3].push(ele.personincharge);//申请人
                        });
                        this.setState({
                            selectionList:[noRepeat(selectionList[0]),noRepeat(selectionList[1]),noRepeat(selectionList[2]),noRepeat(selectionList[3]),],
                            alreadyGetSelectionList:true,
                        },()=>{
                            console.log(this.state.selectionList);
                            const{selectionList}=this.state;
                            this.setState({
                                matchProducts: selectionList[0],//产品自动完成列表
                                matchProducts1:selectionList[1],//平台自动完成列表
                            })
                        })
                    }

                }
            }
        });
        //初始化时间
        let dateStr=getFormatDate(new Date());
        this.setState({
            dateStr:[dateStr,dateStr],
            date:[moment(dateStr),moment(dateStr)],
        });
        this.getBannerList(1,dateStr,dateStr);
    }
    // 获取员工列表
    getUserList(){
        $.ajax({
            url: `${config.Priviliege}/user/list`,
            type: "get",
            async: true,
            headers: {Authorization: 'Bearer ' + sessionStorage.getItem('token')},
            data: {},
            success: data => {
                if (data.code == 200) {
                    let userList={};
                    let id=0;
                    if(data.userList.length){
                        data.userList.forEach((key)=>{
                            id=key.id;
                            userList[id]=key.user_msgs[0].name
                        });
                        this.setState({
                            userList,
                        },()=>{
                            console.log(this.state.userList);
                        })
                    }

                } else {
                    message.info('服务器繁忙')
                }
            },
            error: err => {
                console.log(err)
                message.info('发生错误')
            }
        })
    }
    //生日禁用
    disabledDate(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }
    //生日禁用
    disabledDate1(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }
    //日期筛选方法
    changeDate(date, dateStr) {
        this.setState({
            dateStr,
            date,
        });
        this.setState({
            pageindex:1
        });
        this.getBannerList(1,dateStr[0],dateStr[1],);
    }
    //banner详细信息对话框（新增/编辑）
    showBannerModal(values) {
        if(values){
            this.setState({
                record:values,
            })
        }else{
            this.setState({
                record:{},
            })
        }
        let arr1=[undefined,undefined];
        if(values){
            if(values.timequantum){

                let arr=JSON.parse(values.timequantum);
                arr1=[moment(arr[0]),moment(arr[1])];
                console.log(arr);
            }
            this.props.form.setFieldsValue({
                product : values.product,//产品
                umbrellaname : values.umbrellaname,//渠道商
                account : values.account,//账号（渠道名）
                budgetrecharge : values.budgetrecharge,//预算充值总额
                budgetcoilln : values.budgetcoilln,//预计进线
                budgetcoillnmoney : values.budgetcoillnmoney,//预计进线成本
                timequantum : arr1,//时间段
                practicalrecharge : values.practicalrecharge,//实际充值总额
                balance  : values.balance,//余额
                remark:values.remark,//备注
                budgetmoney:values.budgetmoney,//预计消费
            });
            this.setState({
                visible: true,
                BannerId: values.id,
                wordCount1:values.remark?values.remark.length:0,
                allSpentMoney:values.budgetmoney?values.budgetmoney:0,
                allInputLines:values.budgetcoilln?values.budgetcoilln:0,//预计进线
            });
        }else{
            this.setState({
                visible: true,
                BannerId:undefined
            });
        }
    }
    //取消，关闭对话框
    handleCancel() {
        this.props.form.resetFields();
        this.setState({
            visible: false,
            wordCount1:0,
        });
        this.setState({
            allSpentMoney:0,//预计消费
            allInputLines:0,//预计进线
        })
    }
    //保存
    saveBanner() {
        this.props.form.validateFields((err, values)=>{
            if(!err){
                let arr=values.timequantum;
                values.timequantum=JSON.stringify([arr[0].format('YYYY-MM-DD'),arr[1].format('YYYY-MM-DD')]);
                const {BannerId} = this.state;
                console.log(values);
                let url,
                    data={
                         product : values.product,//产品
                         umbrellaname : values.umbrellaname,//渠道商
                         account : values.account,//账号（渠道名）
                         budgetrecharge : values.budgetrecharge,//预算充值总额
                         budgetcoilln : values.budgetcoilln,//预计进线
                         budgetcoillnmoney : values.budgetcoillnmoney,//预计进线成本
                         timequantum : values.timequantum,//时间段
                         //personincharge : sessionStorage.getItem('token'),//责任人
                         practicalrecharge : values.practicalrecharge,//实际充值总额
                         balance  : values.balance,//余额
                         remark:values.remark,//备注
                         budgetmoney:values.budgetmoney,//预计消费
                    };
                if(BannerId){
                    url = `${config.juseLittleTool}/budget/update`;
                    data.id = BannerId;
                }else{
                    url = `${config.juseLittleTool}/budget/save`;
                }
                $.ajax({
                    url: url,
                    type: "post",
                    async: true,
                    headers: {
                        'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
                    },
                    data:data,
                    success: data => {
                        console.log(data);
                        if(data.code === 200){
                            this.setState({
                                visible: false,
                            },()=> this.getBannerList(this.state.pageindex,this.state.dateStr[0],this.state.dateStr[1]));
                            this.props.form.resetFields();
                        }else{
                            if(data.code===201){
                                this.props.form.setFields({
                                    account: { value: values.account,errors: [new Error(data.mes)] }
                                });
                            }
                            Modal.warning({
                                title: '保存失败',
                                content: `${data.mes}请返回重新操作`,
                            });
                        }
                    }
                });
            }else{
                message.error(`请按规定填写信息，再提交`, 2);
            }
        })
    }
    //获取申请列表  starttime, endtime, product（产品）, umbrellaname（平台）, state, people（负责人）, pagesize, pageindex
    getBannerList(pageindex,starttime, endtime,product,umbrellaname,state,people) {
        const {authTreeOfOne}=this.state;
        let url=`${config.juseLittleTool}/budget/findlist`;
        if(authTreeOfOne['/budget/findonelist']){
            url=`${config.juseLittleTool}/budget/findonelist`
        }
        if(root||(authTreeOfOne['/budget/findlist'])){
            url=`${config.juseLittleTool}/budget/findlist`
        }
        $.ajax({
            url: url,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data:{
                //user:sessionStorage.getItem('token'),
                pagesize:15,
                pageindex,
                starttime,
                endtime,
                state,//申请状态
                product,//产品
                umbrellaname,//平台
                people,//申请人
            },
            success: data => {
                console.log(data);
                let channelList2=[];
                let budgetrecharge = 0;//预算充值总额
                let practicalrecharge=0; //实际充值总额
                let balance=0;  //余额
                let budgetcoilln = 0;//预计进线
                let budgetcoillnmoney = 0;//预计进线成本
                let recyclesum=0;//复购总值
                let index=0;
                if (data.code === 200) {
                    const channelList = data.data.rows;
                    if (channelList.length > 0) {
                        channelList.forEach((ele, i) => {
                            ele.index = i + 1;
                            budgetrecharge += ele.budgetrecharge*1;//预算充值总额
                            practicalrecharge +=ele.practicalrecharge*1; //实际充值总额
                            balance+=ele.balance*1;  //余额
                            budgetcoilln += ele.budgetcoilln*1;//预计进线
                            budgetcoillnmoney += ele.budgetcoillnmoney*1;//预计进线成本
                            recyclesum += ele.recyclesum*1;//复购总值
                            index=i+2;
                        });
                        channelList2.push({index:index,createtime:'总计',budgetrecharge:budgetrecharge.toFixed(2),
                            practicalrecharge:practicalrecharge.toFixed(2),balance:balance.toFixed(2),
                            budgetcoilln:budgetcoilln,budgetcoillnmoney:budgetcoillnmoney.toFixed(2),
                            recyclesum:recyclesum.toFixed(2)});
                        this.setState({
                            channelList,
                            channelList2,
                            channelcount: data.data.count,
                        });
                    }else{
                        this.setState({
                            channelList:[],
                            channelcount: 0,
                        });
                    }
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    //分页
    changePage(pageindex) {
        this.setState({
            pageindex
        });
        const { dateStr,}=this.state;
        this.getBannerList(pageindex,dateStr[0],dateStr[1]);
    }
    //筛选查询
    doSearch(){
        this.setState({
            pageindex:1
        });
        const { dateStr}=this.state;
        this.getBannerList(1,dateStr[0],dateStr[1],);
    }
    //时间段
    changeDateRange(date1,dateStr1){
        this.setState({
            dateStr1,
            date1,
        });
    }
    //字数处理方法
    handleWordsCount(e){
        console.log();
        let value=e.target.value;
        if(value){
            this.setState({
                wordCount1:value.length
            })
        }

    }

//打印
    handlePrint(){
        this.printpage();
    }
    printpage() {
        let newstr = `
            <table class="" >
              <caption>每日预算列表</caption>
                  <thead>
                    <tr>
                      <td>时间</td>
                      <td>产品</td>
                      <td>品台</td>
                      <td>账户名</td>
                      <td>预算充值金额</td>
                      <td>实际充值金额</td>
                      <td>余额</td>
                      <td>预计消费</td>
                      <td>预计进线</td>
                      <td>预计进线成本</td>
                      <td>产出比</td>
                      <td>复购总值</td>
                      <td>负责人</td>
                    </tr>
                  </thead>
          <tbody>`;
        newstr += this.printHtml();
        newstr += `</tbody></table>`;
        let wind = window.open("", "newWindow");
        let styleNode=document.createElement('style');
        styleNode.innerHTML=`	table{
        border-collapse: collapse;
        width:100%;
        font-size:12px;
      }
      td {
        text-align:center;
        border: 1px solid #ddd;
      }`;
        wind.document.getElementsByTagName('head')[0].appendChild(styleNode);
        wind.document.body.innerHTML = newstr;
        wind.print();
    }
    printHtml() {
        let str = '';
        let budgetrecharge = 0;//预算充值总额
        let practicalrecharge=0; //实际充值总额
        let balance=0;  //余额
        let budgetcoilln = 0;//预计进线
        let budgetcoillnmoney = 0;//预计进线成本

        let recyclesum=0;//复购总值
        let rows=[];
        if(this.state.selectedRows.length>0){
            rows=this.state.selectedRows;
        }else{
            rows=this.state.channelList;
        }
        rows.map(item => {
            budgetrecharge += item.budgetrecharge*1;//预算充值总额
            practicalrecharge +=item.practicalrecharge*1; //实际充值总额
            balance+=item.balance*1;  //余额
            budgetcoilln += item.budgetcoilln*1;//预计进线
            budgetcoillnmoney += item.budgetcoillnmoney*1;//预计进线成本
            recyclesum += item.recyclesum*1;//复购总值
            str += `<tr>
                <td>${item.createtime}</td>
                <td>${item.product==undefined?'':item.product}</td>
                <td>${item.umbrellaname==undefined?'':item.umbrellaname}</td>
                <td>${item.account==undefined?'':item.account}</td>
                <td>${item.budgetrecharge==null?'':item.budgetrecharge}</td>
                <td>${item.practicalrecharge==null?'':item.practicalrecharge}</td>
                <td>${item.balance==null?'':item.balance}</td>
                <td>${item.budgetmoney==null?'':item.budgetmoney}</td>
                <td>${(item.budgetcoilln=='NaN')?'':item.budgetcoilln}</td>
                <td>${item.budgetcoillnmoney==null?'':item.budgetcoillnmoney}</td>
                <td>${item.outputratio==='NaN'||item.outputratio==undefined?'':item.outputratio}</td>
                <td>${item.recyclesum==null?'':item.recyclesum}</td>
             
                <td>${item.personincharge==undefined?'':item.personincharge}</td>
            </tr>`;
        });
        str += `<tr>
                <td>总计</td>
                <td></td>
                <td></td>
                <td></td>
                <td>${budgetrecharge==null?'':budgetrecharge.toFixed(2)}</td>
                <td>${practicalrecharge==null?'':practicalrecharge.toFixed(2)}</td>
                <td>${balance==null?'':balance.toFixed(2)}</td>
                <td></td>
                <td>${(budgetcoilln=='NaN')?'':budgetcoilln}</td>
                <td>${budgetcoillnmoney==null?'':budgetcoillnmoney.toFixed(2)}</td>
                <td></td>
                <td>${recyclesum==null?'':recyclesum.toFixed(2)}</td>
           
                <td></td>
            </tr>`;
        return str;
    }

    //自动完成方法
    handleSearchMatchProducts(value){
        let {selectionList}=this.state;
        let projectNames = [];
        if(selectionList[0].length){
            selectionList[0].forEach(item=>{
                if(item.includes(value)){
                    projectNames.push(item);
                }
            });
        }
        this.setState({matchProducts:projectNames});
    }
    //自动完成方法
    handleSearchMatchProducts1(value){
        let {selectionList}=this.state;
        let projectNames = [];
        if(selectionList[1].length){
            selectionList[1].forEach(item=>{
                if(item.includes(value)){
                    projectNames.push(item);
                }
            });
        }
        this.setState({matchProducts1:projectNames});
    }
    //获得产品或平台输入的值
    handleOnChange(value){
        console.log(value);
        this.setState({
            selectValue:value,
        })
    }
    handleOnChange1(value){
        console.log(value);
        this.setState({
            selectValue1:value,
        })
    }
    //导出
    downList() {
        console.log(this.state.selectedRows);
        const { dateStr, }=this.state;
        let url=`${config.juseLittleTool}/budget/downloadExcel `;
        //console.log(url);
        let para;
        if(this.state.selectedRows.length>0){
            para={
                datasource:JSON.stringify(this.state.selectedRows),
            }
        }else{
            para={
                starttime:dateStr[0],
                endtime:dateStr[1],
            };
        }
        $.ajax({
            url:url,
            type: "post",
            headers: { Authorization: 'Bearer '+sessionStorage.getItem('token')},
            data:para,
            async: true,
            success: (data)=> {
                console.log(data);
                if(data.code===200){
                    // window.location.hash = `/channel/download?name=`+data.downloadExcel;
                    window.location=`${config.juseLittleTool}/channel/download?name=`+data.downloadExcel;
                }
            }
        });
    }
    //验证账户名是否重复
    handleNameDuplicate(value){
        let data={ account:value};
        if(this.state.BannerId){
            data.id = this.state.BannerId;
        }
        $.ajax({
            url: `${config.juseLittleTool}/budget/nameverification`,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data,
            success: data => {
                console.log(data);
                if (data.code === 201) {
                    this.props.form.setFields({
                        account: { value: value,errors: [new Error(data.mes)] }
                    });
                }
            }
        });
    }
    //请输入消费金额变化方法
    handleAllSpentMoney(state,value){
        let countValue=()=>{
            let{allSpentMoney,allInputLines,}=this.state;
            if(allSpentMoney>0&&allInputLines>0){
                this.props.form.setFieldsValue({
                    budgetcoillnmoney:Math.round(isNaN(allSpentMoney/allInputLines)?0:allSpentMoney/allInputLines),
                })
            }else{
                this.props.form.setFieldsValue({
                    budgetcoillnmoney:0,
                })
            }
        };
        switch(state){
            case 1://预计消费
                this.setState({
                    allSpentMoney:value?value:0,
                },()=>{
                    countValue();
                });
                break;
            case 2://预计进线
                this.setState({
                    allInputLines:value?value:0,
                },()=>{
                    countValue();
                });
                break;
            default:
                break;
        }
    }
    render() {
        //费用预览表格
        const data = [
            {
                title: '添加时间',
                dataIndex: 'createtime',
                width: 170,
            },{
                title: '产品',
                dataIndex: 'product',
                width: 120,
            },{
                title: '平台',
                dataIndex: 'umbrellaname',
                width: 120,
            },{
                title: '账户名',
                dataIndex: 'account',
                width: 120,
            },{
                title: '预算充值金额',
                dataIndex: 'budgetrecharge',
                width: 200,
            },{
                title: '实际充值金额',
                width: 200,
                dataIndex: 'practicalrecharge',
            }, {
                title: '余额',
                width: 100,
                dataIndex: 'balance',
            } ,
            {
                title: '预计消费',
                width: 100,
                dataIndex: 'budgetmoney',
            } ,
            {
                title: '预计进线',
                width: 100,
                dataIndex: 'budgetcoilln',
            },{
                title: '预计进线成本',
                width: 200,
                dataIndex: 'budgetcoillnmoney',
            },{
                title: '产出比',
                width: 100,
                dataIndex: 'outputratio',
            },{
                title: '复购总值',
                width: 100,
                dataIndex: 'recyclesum',
                render:text=><span>{text==='NaN'?'':text}</span>
            },{
                title: '负责人',
                width: 100,
                dataIndex: 'personincharge',
            },{
                title: '操作',
                width: 100,
                render: (text, record) => (
                    <div>
                        {record.createtime === '总计'?'':(root||authTreeOfOne['/budget/update'])?<Button  type="primary" onClick={this.showBannerModal.bind(this,record)}>编辑</Button>:''}
                    </div>
                )
            }
        ];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows,this.state.feePreviewData);
                this.setState({
                    selectedRows:selectedRows,
                });
            },
            getCheckboxProps: record => ({
                disabled: record.createtime === '总计', // Column configuration not to be checked
            }),
        };
        const { getFieldDecorator } =this.props.form;
        const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 }, };
        const{visible,authTreeOfOne,record,channelList,channelList2 }=this.state;
        return (
            <div className='goods-label clearfix'>
                {/*面包屑*/}
                < Breadcrumb separator=">" >
                    <Breadcrumb.Item>橘色小工具</Breadcrumb.Item>
                    <Breadcrumb.Item>预算管理</Breadcrumb.Item>
                    <Breadcrumb.Item>每日预算</Breadcrumb.Item>
                </Breadcrumb >
                {/*筛选条*/}
                <div style={{marginTop:'40px'}} className="clearfix">
                    <Row>
                        <Col span={7}>
                          时间:&nbsp;&nbsp;&nbsp;
                            <RangePicker placeholder={['请选择日期', '请选择日期']}
                                         onChange={this.changeDate.bind(this)}
                                         format='YYYY-MM-DD'
                                         value={this.state.date}
                                         style={{width:'220px'}}
                                         disabledDate={(val) => this.disabledDate1(val)}
                            />
                        </Col>
                        <Col span={2}>
                            <Button type="primary" onClick={this.doSearch.bind(this)}>查询</Button>
                       </Col>
                        <Col span={3}>{root||authTreeOfOne['/budget/save']?<Button type="primary" style={{marginLeft:'10px'}}  onClick={() => this.showBannerModal()}>添加预算</Button>:''}</Col>
                        <Col span={2} ><Button type="primary" onClick={this.handlePrint.bind(this)}>打印</Button></Col>
                        <Col span={2} ><Button type="primary" onClick={this.downList.bind(this)}>导出Excel</Button></Col>
                    </Row>
                    <div ref={(printdiv)=>{this.printdiv = printdiv}} className='allgoods-table clearfix' style={{marginTop:'40px'}}>
                        <Table rowSelection={rowSelection}
                               rowKey="index"
                               columns={data}
                               dataSource={this.state.channelList}
                               // pagination={false}
                               pagination={{ pageSize: 15}}
                               bordered
                        />
                    </div>
                    <div style={{position:'fixed',bottom:'0px',paddingRight:'30px',}}>
                        { channelList.length>1?
                            <table style={{ borderCollapse:'collapse',}} className="testTable">
                                <tbody>
                                <tr>
                                    <th style={{width:'3%'}}></th>
                                    <th style={{width:'3.96%'}}>预算充值总额</th>
                                    <th style={{width:'3.96%'}}>实际充值总额</th>
                                    <th style={{width:'3.96%'}}>余额</th>
                                    <th style={{width:'3.96%'}}>预计进线</th>
                                    <th style={{width:'3.96%'}}>预计进线成本</th>
                                    <th style={{width:'3.96%'}}>复购总值</th>
                                </tr>
                                <tr>
                                    <td style={{width:'3%'}}>总计</td>
                                    <td style={{width:'3.96%'}}>{channelList2[0].budgetrecharge}</td>
                                    <td style={{width:'3.96%'}}>{channelList2[0].practicalrecharge}</td>
                                    <td style={{width:'3.96%'}}>{channelList2[0].balance}</td>
                                    <td style={{width:'3.96%'}}>{channelList2[0].budgetcoilln}</td>
                                    <td style={{width:'3.96%'}}>{channelList2[0].budgetcoillnmoney}</td>
                                    <td style={{width:'3.96%'}}>{channelList2[0].recyclesum}</td>
                                </tr>
                                </tbody>
                            </table> :''}
                    </div>

                </div>
                <Modal
                    className="little-tool-modal2"
                    title={(JSON.stringify(record)==="{}")?'新增预算':"编辑预算"}
                    visible={visible}
                    okText="确定"
                    cancelText="取消"
                    onOk={this.saveBanner.bind(this)}
                    onCancel={this.handleCancel.bind(this)}
                    maskClosable={false}
                >
                    <Form>
                        <Row>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="产品"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('product', {
                                        rules: [{ required: true, message: '请输入产品名称' }],
                                    })(
                                        <AutoComplete
                                            dataSource={this.state.matchProducts}
                                            onSearch={this.handleSearchMatchProducts.bind(this)}
                                            placeholder="请输入产品名称"
                                            onChange={this.handleOnChange.bind(this)}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="平台"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('umbrellaname', {
                                        rules: [{ required: true, message: '请输入平台' }],
                                    })(
                                        <AutoComplete
                                            dataSource={this.state.matchProducts1}
                                            onSearch={this.handleSearchMatchProducts1.bind(this)}
                                            placeholder="请输入平台"
                                            onChange={this.handleOnChange1.bind(this)}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="账户名"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('account', {
                                        rules: [{ required: true, message: '请输入账户名' }],
                                    })(
                                        <AutoComplete
                                            // dataSource={this.state.medicalNameDataSource}
                                            // onSearch={this.handleSearch}
                                            placeholder="请输入账户名"
                                            onBlur={this.handleNameDuplicate.bind(this)}

                                        />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label=" 预算充值金额"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('budgetrecharge', {
                                        rules: [{ required: true, message: '请输入预算充值金额' }],
                                    })(
                                        <InputNumber placeholder="请输入预算充值金额" style={{width:'100%'}} min={0} step={0.01} precision={2}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="实际充值金额"  style={{ minHeight: '60px', marginBottom: 0 }} >
                                    {getFieldDecorator('practicalrecharge', {

                                    })(
                                        <InputNumber placeholder="请输入实际充值金额" style={{width:'100%'}} min={0} step={0.01} precision={2}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="预计消费"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('budgetmoney', {
                                        rules: [{ required: true, message: '请输入预计消费' }],

                                    })(
                                        <InputNumber placeholder="请输入预计消费" style={{width:'100%'}} min={0} step={0.01} precision={2} onChange={this.handleAllSpentMoney.bind(this,1)}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label=" 预计进线"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('budgetcoilln', {
                                        rules: [{ required: true, message: '请输入预计进线' }],
                                    })(
                                        <InputNumber placeholder="请输入预计进线" style={{width:'100%'}} min={0} step={1} precision={0} onChange={this.handleAllSpentMoney.bind(this,2)}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="预计进线成本"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('budgetcoillnmoney', {
                                        rules: [{ required: true, message: '请输入预计进线成本' }],
                                    })(
                                        <Input disabled />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} offset={1}>
                                <FormItem {...formItemLayout} label="余额"  style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('balance', {

                                    })(
                                        <InputNumber placeholder="请输入余额" style={{width:'100%'}} min={0} step={0.01} precision={2}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={1}>
                                <FormItem {...formItemLayout} label="计算产出比和复购总值的时间段选择" style={{ minHeight: '60px', marginBottom: 0 }}>
                                    {getFieldDecorator('timequantum', {
                                        rules: [{ required: true, message: '请选择产出比时间段选择' }],
                                    })(
                                        <RangePicker placeholder={['请选择日期', '请选择日期']}
                                                     onChange={this.changeDateRange.bind(this)}
                                                     format='YYYY-MM-DD'
                                                     style={{width:'220px'}}
                                                     disabledDate={(val) => this.disabledDate(val)}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={23} offset={1} className="little-tool-textarea">
                                <FormItem {...{ labelCol: { span: 2 }, wrapperCol: { span: 22 }, }} label="备注">
                                    {getFieldDecorator('remark', {
                                        rules: [{ max: 200,message: '请输入200个以内字符' }],
                                    })(
                                        <TextArea   placeholder="请输入备注" autosize={{ minRows:4, maxRows: 6 }} onChange={this.handleWordsCount.bind(this)}/>
                                    )}
                                </FormItem>
                                <div className="clearfix" style={{float:'right'}}>
                                    <span style={{float:'right'}} >{this.state.wordCount1}/200</span>
                                </div>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </div>
        )
    }
}
const EverydayBudget = Form.create()(EverydayBudget1);
export default EverydayBudget;